<template>
    <div>
        <el-table :data="tableData" ref="table" stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="content" label="商品名称"></el-table-column>
            <el-table-column prop="id" label="商品编码"></el-table-column>
            <el-table-column prop="resultDesc" label="区域总库存"></el-table-column>
        </el-table>
        <div class="block" v-show="page.pageTotal>10">
            <el-pagination
                @current-change="handleCurrentChange"
                :page-size="page.pnum"
                :current-page="page.currentPage"
                layout="total, prev, pager, next , jumper"
                :total="page.pageTotal">
            </el-pagination>
        </div>
        <div>
            {{multipleSelectionAll.length}}
        </div>
    </div>
</template>

<script>
    import {
        storeAsGet,
        storeAsPost,
        storeAsPut
    } from '../api/api';
    import {formatDate} from '../tool/tool'
    import {base64,tool_confirm} from '../tool/tool'
    export default {
        data(){
            return {
                tableData: [], // 表格数据
                multipleSelectionAll:[],//所有选中的数据包含跨页数据
                multipleSelection:[],// 当前页选中的数据
                idKey: 'barcode', // 标识列表数据中每一行的唯一键的名称
                page:{
                    //每页数据量
                    pnum:10,
                    //数据总数
                    pageTotal:0,
                    //当前页，从1开始
                    currentPage:0,
                },
                promoteStatusEnum: 'ACTIVATING',
            }
        },
        methods: {
            handleCurrentChange(val){
                this.page.currentPage = val;
                console.log(this.page.currentPage,"val")
                this.changePageCoreRecordData();
                this.getGoodsList(val,2);
                // if(!this.$isNull(this.page.pageTotal)) this.getGoodsList();
            },
            handleSelectionChange (val) {
                console.log(val,"handleSelectionChange")
                val.map(item=>{
                    item.idKey = this.idKey;
                })
                this.multipleSelection = val;
                //实时记录选中的数据
                setTimeout(()=>{
                    this.changePageCoreRecordData();
                }, 50)
            },
            setSelectRow() {
                if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
                    return;
                }
                // 标识当前行的唯一键的名称
                let idKey = this.idKey;
                let selectAllIds = [];
                let that = this;
                this.multipleSelectionAll.forEach(row=>{
                    selectAllIds.push(row['id']);
                })
                this.$refs.table.clearSelection();
                for(var i = 0; i < this.tableData.length; i++) {
                    if (selectAllIds.indexOf(this.tableData[i]['id']) >= 0) {
                        // 设置选中，记住table组件需要使用ref="table"
                        this.$refs.table.toggleRowSelection(this.tableData[i], true);
                    }
                }
            },
            // 记忆选择核心方法
            changePageCoreRecordData () {
                // 标识当前行的唯一键的名称
                let idKey = this.idKey;
                // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
                if (this.multipleSelectionAll.length <= 0) {
                    this.multipleSelectionAll = this.multipleSelection;
                    // console.log(this.multipleSelectionAll,"this.multipleSelectionAll")
                    return;
                }

                // 总选择里面的key集合
                let selectAllIds = [];
                this.multipleSelectionAll.forEach(row=>{
                    selectAllIds.push(row['id']);
                })
                console.log(selectAllIds,"selectAllIds")

                let selectIds = []
                // 获取当前页选中的id

                this.multipleSelection.forEach(row=>{
                    let that = this;

                    selectIds.push(row['id']);
                    console.log(selectAllIds.indexOf(row['id']))
                    // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
                    if (selectAllIds.indexOf(row['id']) < 0) {
                        that.multipleSelectionAll.push(row);
                    }
                    console.log(that.multipleSelectionAll,"this.multipleSelectionAll")

                })

                let noSelectIds = [];
                // 得到当前页没有选中的id
                this.tableData.forEach(row=>{
                    if (selectIds.indexOf(row['id']) < 0) {
                        noSelectIds.push(row['id']);
                    }
                })
                console.log(noSelectIds,"noSelectIds")

                noSelectIds.forEach(id=>{
                    let that = this;
                    if (selectAllIds.indexOf(id) >= 0) {
                        for(let i = 0; i< that.multipleSelectionAll.length; i ++) {
                            if (that.multipleSelectionAll[i]['id'] == id) {
                                console.log(that.multipleSelectionAll,"noSelectIds")
                                // 如果总选择中有未被选中的，那么就删除这条
                                that.multipleSelectionAll.splice(i, 1);
                                break;
                            }
                        }
                    }
                })
            },
            //请求接口部分
            getGoodsList(currentPage,val){
                let data = {};
                data['page'] = this.page.currentPage+1;
                console.log(this.page.currentPage,"this.page.currentPage")
                data['pnum'] = this.page.pnum;
                if(val == 2){
                    let pages = currentPage-1;

                    storeAsGet(
                        '/promote/wishBill/page/wishBillStatus?page='+pages+'&size=10&promoteWishBillStatusEnum='+this.promoteStatusEnum+'&counselorId='
                        +this.$route.query.id
                    ).then(res => {
                        console.log(res.data.content.page)
                        this.tableData = res.data.content.page.content ? res.data.content.page.content : [];
                        this.page = {
                            pnum:10,
                            pageTotal:res.data.content.page.totalElements,
                            currentPage:res.data.content.page.number+1,
                        };
                        setTimeout(()=>{
                            this.setSelectRow();
                        }, 50)
                    })
                }else{
                    storeAsGet(
                        '/promote/wishBill/page/wishBillStatus?page='+this.page.currentPage+'&size=10&promoteWishBillStatusEnum='+this.promoteStatusEnum+'&counselorId='
                        +this.$route.query.id
                    ).then(res => {
                        console.log(res.data.content.page)
                        this.tableData = res.data.content.page.content ? res.data.content.page.content : [];
                        this.page = {
                            pnum:10,
                            pageTotal:res.data.content.page.totalElements,
                            currentPage:res.data.content.page.number,
                        };
                        setTimeout(()=>{
                            this.setSelectRow();
                        }, 50)
                    })
                }

            }
        },
        created () {
            this.getGoodsList(this.page.currentPage)
        }
    }

</script>

<style scoped>
    .exd_title span{
        display: inline-block;
        padding: 20px 20px 20px 0;
    }
    .exd_value{
        margin-bottom: 20px;
    }
    .exd_ul li{
        padding: 5px 0;
    }
</style>
